<!doctype html>
<html lang="en">
<head>
    <title>送老师登上南方都市报封面！</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../node_modules/sweetalert/dist/sweetalert.css">
    <link rel="stylesheet" href="/src/css/app.less">
    <link rel="stylesheet" href="/src/css/teacher.less">
</head>
<body>
<div class="share disNone">
    <div class="top">
        <div class="today">
            <p>{{time.today}}</p>
            <p>星期{{time.day}}</p>
        </div>
    </div>
    <div class="name">
        <p>{{teacher}}老师，教师节快乐</p>
        <span>共有{{total}}人用南都封面给老师送出节日祝福</span>
    </div>
    <div class="pic">
        <div class="img" v-bind:style="{'background-image': 'url('+pic+')'}"/></div>
        <ul>
            <li>学校：{{school}}</li>
            <li>引路人：{{teacher}}</li>
            <li>印象：{{label}}</li>
        </ul>
    </div>
    <div class="text">
        <i class="triangle"></i>
        <i class="stamp"></i>
        {{text}}
    </div>
    <div class="title">
        {{title}}
    </div>
    <div class="content">
        {{con}}
    </div>
    <div class="bottom">
        <div class="people" :class="{'hidden':like.total < 1}">
            <p><span>祝福人：<b v-for="l in like.list">{{l.nickname}}，</b></span>……共有{{like.total}}人送出祝福</p>
        </div>
        <p class="btns">
            <a href="javascript:void(0);" class="toShare" v-on:click="toShare()"><i></i>分享祝福</a>
            <a href="javascript:void(0);" class="toLike" :class="{'liked':like.is_like}" v-on:click="tolike()"><i></i>添我祝福</a>
            <a href="teacher.html" class="toPlay"><i></i>新的祝福</a>
            <a href="teacher_rank.html" class="toPlay">祝福排行榜</a>
        </p>
        <p class="footer">
            <a href="http://www.yixiaoqun.com/#/group/51">查看更多祝福内容>></a>
        </p>
    </div>

    <div class="shareTips" v-show="isShare" v-on:click="toShare()">
        <span>晒晒我的好老师！</span>
    </div>
</div>
<div class="music on">
    <audio src="../src/other/teacher/bgmusic.mp3" autoplay="autoplay" loop="loop" id="bgmusic"></audio>
</div>

<script src="/src/lib/flexible.js"></script>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/sweetalert/dist/sweetalert-dev.js"></script>
<script src="/src/js/config.js"></script>
<script src="/src/js/teacher.js"></script>

<script>
    new Vue({
        el: '.share',
        data: {
            isShare:false,
            tid:'',
            total:'',
            like:'',
            school:'',
            teacher:'',
            label:'',
            text:'',
            title:'',
            con:'',
            pic:'',
            time:{
                today:'',
                day:''
            }
        },
        mounted() {
            this.tid = $config.GetQueryString('tid');
            this.getData();
            this.getDate();
            $config.audioAutoPlay();
        },
        methods : {
            //获取日期
            getDate:function(){
                var date = new Date(),day='';
                this.time.today = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';
                switch (date.getDay()){
                    case 1:
                        day = '一'
                        break;
                    case 2:
                        day = '二'
                        break;
                    case 3:
                        day = '三'
                        break;
                    case 4:
                        day = '四'
                        break;
                    case 5:
                        day = '五'
                        break;
                    case 6:
                        day = '六'
                        break;
                    case 7:
                        day = '七'
                        break;
                }
                this.time.day = day;
            },
            //获取内容
            getData: function(){
                var _this = this;
                //获取参与人数
                $.ajax({
                    url : $config.host+'/H5/signUpSum',
                    type : 'post',
                    data : {
                        project: location.hostname == 'h5.yixiaoqun.com'?'jsj':'test',
                    },
                    dataType: 'jsonp',
                    success : function (json) {
                        _this.total = parseInt(json.data.like_sum)+parseInt(json.data.topic_sum)+1700;
                    }
                })
                //数据
                $.ajax({
                    url : $config.host+'/H5/showTopic',
                    type : 'post',
                    data : {
                        topicid: _this.tid,
                        project: location.hostname == 'h5.yixiaoqun.com'?'jsj':'test',
                    },
                    dataType: 'jsonp',
                    success : function (json) {
                        var cons = json.data.topic_data.content;
                        var con = cons.split("\n");

                        if($config.iswx()){
                            $config.wxShare({
                                title:con[1].substring(3)+'老师，您上报纸封面啦！',
                                cont:'今年教师节，让我们用一种特殊的方式，感谢停留在我们内心的那位好老师。',
                                url:'',
                                logo:json.data.topic_data.picture[0].original,
                            })
                        }

                        document.title = con[1].substring(3)+'老师，您上报纸封面啦！';

                        _this.like = json.data.like;
                        _this.teacher = con[1].substring(3);
                        _this.school = con[2].substring(3);
                        _this.label = con[3].substring(3);
                        _this.text = con[4].substring(4);
                        _this.title = con[5];
                        _this.con = con[6];
                        _this.pic = json.data.topic_data.picture[0].original;

                        $('.disNone').removeClass('disNone');
                    }
                })
            },
            //祝福(点赞)
            tolike: function(){
                var _this = this;
                if(_this.like.is_like) {
                    swal({title: '你已经祝福过了哦', type: "warning",});
                    return;
                }

                _this.like.is_like = true;
                $.ajax({
                    url : $config.host+'/Topic/likeTopic',
                    type : 'post',
                    data : {
                        topicid: _this.tid
                    },
                    dataType: 'jsonp',
                    success : function (json) {
                        _this.like.list.push({nickname:json.data.nickname});
                        _this.like.total ++;
                    }
                })
            },
            //分享(弹层)
            toShare: function(){
                this.isShare = !this.isShare;
            },
        }
    })
</script>
</body>
</html>